<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse Events with MochiKit</title>
    <link href="mouse_events.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>
    <script type="text/javascript" src="mouse_events.js"></script>
</head>
<body>
    <h1>
        Mouse Events with MochiKit
    </h1>
    <p>
        For a detailed description of what happens under the hood, check out
        <a href="mouse_events.js" class="view-source">mouse_events.js</a>.
    </p>

    <p>
        View Source: [
            <a href="index.html" class="view-source">index.html</a> |
            <a href="mouse_events.js" class="view-source">mouse_events.js</a> |
            <a href="mouse_events.css" class="view-source">mouse_events.css</a>
        ]
    </p>

    <div id="show-mouse-event" class="scroll-box">
      Hover, Click, or Scroll In Me:<br/><br/>
      <span id="show-mouse-event-repr"></span>
    </div>

    <div id="scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;">
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
      Scroll Me and then the page scrolls! <br />
    </div>

    <div id="no-scroll-page" class="scroll-box" style="height: 100px; overflow: scroll;">
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
      Scroll Me and then the page does not scroll! <br />
    </div>

    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
    <div class="padding">Ignore me I just make the page big enough to require scrollbars.</div>
</body>
</html>
